<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>css font shorthand rule</title>
		<link class="exclude" rel="stylesheet" type="text/css" href="css/global.css"></link>
		<link class="exclude" rel="stylesheet" type="text/css" href="css/style.css"></link> 		
	</head>
	<body>
		<div id="css-font-shorthand-demo">
			<h2 class="demo-part">
				Css font shorthand rule
			</h2>
			<div class="demo-part demo-ct">
				<p>When styling fonts with CSS you may be doing this:</p>
				<pre class="brush:css;">
					font-weight: bold;
					font-style: italic;
					font-variant: small-caps;
					font-size: 1em;
					line-height: 1.5em;
					font-family: verdana,sans-serif 
				</pre>
				<p>There's no need though as you can use this CSS shorthand property:</p>
				<pre class="brush:css;">font: bold italic small-caps 1em/1.5em verdana,sans-serif</pre>
				<p>
					Much better! Just a few of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this shorthand command, and font-size must come directly before this. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal, so do bear this in mind too.
				</p>
			</div>
		</div>
	</body>
</html>
